<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem to="/cart">购物车</XtxBreadItem>
        <XtxBreadItem>填写订单</XtxBreadItem>
      </XtxBread>

      <div v-if="order" class="wrapper">
        <!-- 收货地址 -->
        <h3 class="box-title">收货地址</h3>
        <div class="box-body">
          <!-- 收货地址组件 -->
          <CheckAddress :list="order.userAddresses" @change="changeAddressId"></CheckAddress>
        </div>

        <!-- 商品信息 -->
        <h3 class="box-title">商品信息</h3>
        <div class="box-body">
          <table class="goods">
            <thead>
            <tr>
              <th width="520">商品信息</th>
              <th width="170">单价</th>
              <th width="170">数量</th>
              <th width="170">小计</th>
              <th width="170">实付</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="item in order.goods" :key="item.skuId">
              <td>
                <a class="info" href="javascript:;">
                  <img v-lazy="item.picture" alt="">
                  <div class="right">
                    <p>{{ item.name }}</p>
                    <p>{{ item.attrsText }}</p>
                  </div>
                </a>
              </td>
              <td class="tc">
                ¥{{ item.price }}
              </td>
              <td class="tc">
                {{ item.count }}
              </td>
              <td class="tc">
                <!-- 小计 -->
                <p>
                  &yen;{{ item.totalPrice }}
                </p>
              </td>
              <td class="tc">
                <!-- 实付 -->
                &yen;{{ item.totalPayPrice }}
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <!-- 配送时间 -->
        <div class="box-title">配送方式</div>
        <div class="box-delivery-pay">
          <a class="active" href="javascript:;">不限送货时间: 周一至周日</a>
          <a href="javascript:;">工作日送货: 周一至周五</a>
          <a href="javascript:;">双休日、假日送货: 周六至周日</a>
        </div>

        <!-- 支付方式 -->
        <div class="box-title">支付方式</div>
        <div class="box-delivery-pay">
          <a class="active" href="javascript:;">在线支付</a>
          <a href="javascript:;">货到付款</a>
          <span class="note">货到付款需要付5元手续费</span>
        </div>

        <!-- 金额明细 -->
        <div class="box-title">金额明细</div>
        <div class="box-body">
          <div class="total">
            <dl>
              <dt>商品件数：</dt>
              <dd>{{ order.summary.goodsCount }}件</dd>
            </dl>
            <dl>
              <dt>商品总价：</dt>
              <dd>{{ order.summary.totalPrice }}件</dd>
            </dl>
            <dl>
              <dt>运<i></i>费：</dt>
              <dd>¥{{ order.summary.postFee }}</dd>
            </dl>
            <dl>
              <dt>应付总额：</dt>
              <dd class="price">¥{{ order.summary.totalPrice }}</dd>
            </dl>
          </div>
        </div>
        <div class="submit">
          <XtxButton type="primary" @click="submitOrder">提交订单</XtxButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from '@/api/order'
import CheckAddress from '@/components/member/CheckAddress'
import { reactive, ref } from 'vue'
import Message from '@/components/library/Message'
import { useRoute, useRouter } from 'vue-router'

export default {
  name: 'checkout',
  components: { CheckAddress },
  setup() {
    const router = useRouter()
    const route = useRoute()

    // 获取结算-生成订单-订单信息
    const order = ref(null)

    // 提交订单: 需要收货地址id
    const requestParams = reactive({
      // 商品信息, 获取订单信息后设置
      goods: [],              // 这个值一定是有的, 购物车组件做了前置判断, 非空才能进入订单页面
      deliveryTimeType: 1,    // 配送时间类型  1: 不限制
      payType: 1,             // 支付方式  1: 在线支付 2: 货到付款
      payChannel: 1,          // 支付渠道
      buyerMessage: '',       // 买家留言
      // 收货地址Id, 切换收货地址或组件初始化的时候设置
      addressId: null         // 这个不能缺少!!!, 不然不能提交订单
    })

    // 在结算页根据地址栏是否有订单Id来判断结算方式
    if (route.query.orderId) {
      // 按照订单中商品结算
      API.repurchaseOrder(route.query.orderId)
          .then(res => {
            order.value = res.result
            requestParams.goods = res.result.goods.map(item => ({
              skuId: item.skuId,
              count: item.count
            }))
          })
    } else {
      // 按照购物车商品结算
      API.createOrder()
          .then(res => {
            order.value = res.result
            // item => ({})  ==> 省略写法 item => { return {} }
            requestParams.goods = res.result.goods.map(item => ({
              skuId: item.skuId,
              count: item.count
            }))
          })
    }

    // CheckAddress组件初始化的时候, 会触发一次这个方法
    const changeAddressId = (id) => {
      requestParams.addressId = id
      console.log(requestParams.addressId)
    }

    // 提交订单
    const submitOrder = () => {
      // 检测
      // debugger
      if (!requestParams.addressId) {
        return Message({ text: '亲, 请选择收货地址' })
      }
      API.submitOrder(requestParams)
          .then(res => {
            // 提交订单成功
            Message({
              type: 'success',
              text: '提交订单成功'
            })
            // 跳转到支付页面 | 订单编号 res.result.id
            router.push(`/member/pay?orderId=${res.result.id}`)
          })
          .catch((err) => {
            Message({ text: `提交订单失败, ${err.response.data.result}` })
          })
    }

    return {
      order,
      changeAddressId,
      requestParams,
      submitOrder
    }
  }
}
</script>

<style lang="less" scoped>

.wrapper {
  padding: 0 20px;
  min-height: 800px;
  background-color: #fff;

  .box-title {
    height: 70px;
    line-height: 70px;
    padding-left: 10px;

    border-bottom: 1px solid #f5f5f5;
    font-size: 16px;
    font-weight: normal;
  }

  .box-body {
    padding: 20px 0;

    .goods {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;

      .info {
        display: flex;
        text-align: left;

        img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          vertical-align: middle;
        }

        .right {
          line-height: 24px;

          p {
            &:last-child {
              color: #999;
            }
          }
        }
      }

      tr {
        th {
          background: #f5f5f5;
          font-weight: normal;
        }

        td, th {
          text-align: center;
          padding: 20px;
          border-bottom: 1px solid #f5f5f5;

          &:first-child {
            border-left: 1px solid #f5f5f5;
          }

          &:last-child {
            border-right: 1px solid #f5f5f5;
          }
        }
      }
    }

    .total {
      dl {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;

        dt {
          width: 70px;

          i {
            display: inline-block;
            // 宽度为2em, 就表示占据两个字的宽度
            width: 2em;
          }
        }

        dd {
          width: 240px;
          padding-right: 70px;
          text-align: right;

          &.price {
            font-size: 20px;
            color: @priceColor;
          }
        }
      }
    }
  }

  .cart {
    margin: 20px 0;
    background-color: #fff;
    color: #666;
    border: 1px solid #f5f5f5;

    table {
      border-spacing: 0;
      border-collapse: collapse;
      line-height: 24px;

      thead {
        height: 60px;
        background-color: #f5f5f5;
      }

      // th与td共有的样式
      th, td {
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;

        &:first-child {
          text-align: left;
          padding-left: 30px;
          color: #999;
        }
      }

      // th单独有的样式
      th {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
      }
    }
  }

  .box-delivery-pay {
    display: flex;
    align-items: center;
    height: 90px;

    > a {
      width: 228px;
      height: 50px;
      line-height: 48px;
      margin-right: 25px;

      border: 1px solid #e4e4e4;
      border-radius: 3px;
      text-align: center;
      color: #666;

      &:hover, &.active {
        border-color: @xtxColor;
      }
    }

    .note {
      color: #999;
    }
  }

  .submit {
    padding: 60px;
    text-align: right;
    border-top: 1px solid #f5f5f5;
  }
}
</style>
